<template>
  <div class="hello">
    <!-- 信息盒子 start -->
    <div class="infoBox box">
      <div class="content">
        <div class="title">游戏名称：</div>
        <div class="value">原神</div>
      </div>
      <div class="content">
        <div class="title">游戏区服：</div>
        <div class="value">
          <select name="server">
            <option value="官服">官服</option>
          </select>
        </div>
      </div>
    </div>
    <!-- 信息盒子 end -->

    <!-- 选择角色盒子 start -->
    <div class="choiceRoleBox box">
      <div class="boxHead">已选角色</div>
      <!-- 选择规则 start -->
      <div class="content">
        <ul>
          <li v-for="(li, index) in choiceRuleList" :key="index">
            {{ li }}
          </li>
        </ul>
      </div>
      <!-- 选择规则 end -->

      <!-- 已选角色 start-->
      <div class="roleWeaponTitle" v-show="selectedRoleList.length > 0">
        已选角色
      </div>
      <SelectRoleWeaponList
        :selectedRoleList="selectedRoleList"
      ></SelectRoleWeaponList>
      <!-- 已选角色 end-->

      <!-- 已选武器 start-->
      <div class="roleWeaponTitle" v-show="selectedWeaponList.length > 0">
        已选武器
      </div>
      <SelectRoleWeaponList
        :selectedRoleList="selectedWeaponList"
      ></SelectRoleWeaponList>
      <!-- 已选武器 end-->

      <!-- 条件搜索盒子 start -->
      <div class="mutiSearchBox">
        <div class="content">
          <div class="title">价格区间：</div>
          <div class="value">
            <input type="number" placeholder="价格" v-model="beginAccountPrice" />
            <span class="line">—</span>
            <input type="number" placeholder="价格" v-model="endAccountPrice" />
          </div>
        </div>
        <div class="content">
          <div class="title">角色文本：</div>
          <div class="value">
            <input
              type="text"
              name="searchInput"
              v-model="roleText"
              placeholder="输入编号或角色名以“.”隔开"
            />
          </div>
        </div>
        <div class="content">
          <div class="title">编号搜索：</div>
          <div class="value">
            <!-- <input type="checkbox" name="searchByNumber" /> -->
            <el-radio-group v-model="searchByNumber" size="mini">
              <el-radio label="0" style="color: #fff">关闭</el-radio>
              <el-radio label="1" style="color: #fff">开启</el-radio>
            </el-radio-group>
          </div>
        </div>
      </div>
      <!-- 条件搜索盒子 end -->

      <!-- 操作事件盒子 start-->
      <div class="operateBox">
        <div class="content">
          <div class="btn">
            <el-button
              type="info"
              icon="el-icon-refresh"
              size="medium"
              plain
              @click="reset"
              >重置</el-button
            >
          </div>
          <div class="btn">
            <el-button
              type="info"
              icon="el-icon-search"
              size="medium"
              plain
              @click="query"
              >搜索</el-button
            >
          </div>
          <div class="btn">
            <el-button type="info" icon="el-icon-camera" size="medium" plain
              >截图</el-button
            >
          </div>
        </div>
      </div>
      <!-- 操作事件盒子 end-->

      <!-- 角色展示 start-->
      <div class="roleListBox">
        <div class="content">
          <el-tabs type="card" stretch>
            <el-tab-pane v-for="(item, index) in allRoleList" :key="index">
              <span slot="label">
                <i class="el-icon-circle-check"></i>
                {{ item.title }}
              </span>
              <div class="list">
                <SingleRoleWeaponList
                  :roleList="item"
                  @changeStatus="roleFun"
                ></SingleRoleWeaponList>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
      <!-- 角色展示 end-->
    </div>
    <!-- 选择角色盒子 end -->

    <!-- 查询结果头部 start -->
    <div class="resultListBox box" v-if="accountList.length != 0">
      <div class="switchTitle" @click="switchOrderWay">
        <div class="switch" :class="{ active: orderByPrice }" data-index="0">
          按价格高低排序
        </div>
        <div class="switch" :class="{ active: !orderByPrice }" data-index="1">
          按上传时间排序
        </div>
      </div>
    </div>
    <!-- 查询结果头部 end -->

    <!-- 查询结果展示 start -->
    <el-row
      v-if="accountList.length != 0"
      class="box"
      v-loading="isLoading"
      element-loading-background="rgba(23,35,48, 0.8)"
    >
      <div
        class="resultList box"
        v-for="(item, index) in accountList"
        :key="index"
      >
        <div class="labelBox">
          <div class="label blue">编号：{{ item.accountNumber }}</div>
          <div class="label red">{{ item.accountPrice }}元</div>
          <div
            class="label"
            :class="item.accountGender == 1 ? 'girl' : 'boy'"
            v-if="item.accountGender"
          >
            {{ item.accountGender == 1 ? "女" : "男" }}
          </div>
          <div class="label green">冒险等级:{{ item.accountLevel }}</div>
          <div class="label green">活跃天数:{{ item.accountDays }}</div>
          <div class="label yellow">生成截图</div>
        </div>
        <ResultRoleWeaponList
          :roleList="
            Object.assign(item.roleName2Pic || {}, item.weaponName2Pic || {})
          "
        ></ResultRoleWeaponList>
        <div class="remark" v-if="item.accountRemark">
          备注：{{ item.accountRemark }}
        </div>
      </div>
    </el-row>
    <!-- 查询结果展示 end -->

    <!-- 分页 start -->
    <div class="paginationBox box" v-if="accountList.length != 0">
      <div class="block">
        <el-pagination small 
            v-show="total > 0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @current-change="changePage"> 
        </el-pagination>
      </div>
    </div>
    <!-- 分页 end -->
  </div>
</template>

<script>
// import component
import SelectRoleWeaponList from "@/components/SelectRoleWeaponList.vue";
import SingleRoleWeaponList from "@/components/SingleRoleWeaponList.vue";
import ResultRoleWeaponList from "@/components/ResultRoleWeaponList.vue";

// import api
import { getCountList } from "@/api/count.js";
import { getRoleList, getWeaponList } from "@/api/roleweapon.js";

export default {
  name: "Page",
  components: {
    SelectRoleWeaponList,
    SingleRoleWeaponList,
    ResultRoleWeaponList,
  },
  data() {
    return {
      // 选择规则
      choiceRuleList: [
        "1、选中角色可点击角色上的+号设置重复角色（多命）搜索",
        "2、角色文本框可输入编号搜索，可输入角色名搜索，以“.”隔开，可单字搜索，例如：甘.胡",
        "3、搜索结果中点爱心可以加入备选，方便比较挑选，从右侧漂浮爱心进入",
        "4、截图按钮可生成整页搜索结果截图，搜索结果中的截图可生成单账号信息截图",
      ],
      // 已选角色
      selectedRoleList: [],
      // 已选武器
      selectedWeaponList: [],
      searchByNumber: "0",
      allRoleList: [
        {
          title: "五星角色",
          list: [],
        },
        {
          title: "五星武器",
          list: [],
        },
        {
          title: "四星角色",
          list: [],
        },
        {
          title: "四星武器",
          list: [],
        },
      ],
      // 账号列表
      accountList: [],
      // 根据价格排序
      orderByPrice: true,
      // 根据最小价格
      beginAccountPrice :0,
      // 根据最大价格
      endAccountPrice:0,
      // 角色文本
      roleText:"",
      // 总条数
      total:0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        accountStatus: 0,
        accountType: 1,
      },
      // 加载状态
      isLoading: true,
    };
  },
  methods: {
    changePage(index){
      this.queryParams.pageNum = index
      this.query()
    },
    // 角色选择方法
    roleFun(obj) {
      // 拿到传递来的对象
      let role = obj.role
      // 确定是武器还是角色
      let targetObj = obj.title.indexOf("角色")!=-1 ? this.selectedRoleList : this.selectedWeaponList
      
      let flagIndex = -1;
      targetObj.forEach((item, index) => {
        if (item.name == role.name) {
          flagIndex = index;
        }
      });
      if (flagIndex == -1) {
        targetObj.push({
          imgUrl: role.imgUrl,
          name: role.name,
          count: 0,
        });
      } else {
        targetObj.splice(flagIndex, 1);
      }
    },
    // 武器选择方法
    weaponFun(role) {
      let flagIndex = -1;
      this.selectedWeaponList.forEach((item, index) => {
        if (item.name == role.name) {
          flagIndex = index;
        }
      });
      if (flagIndex == -1) {
        this.selectedWeaponList.push({
          imgUrl: role.imgUrl,
          name: role.name,
          count: 0,
        });
      } else {
        this.selectedWeaponList.splice(flagIndex, 1);
      }
    },
    // 切换排序
    switchOrderWay(e) {
      // 设置加载状态
      this.isLoading = true;
      if (e.target.dataset.index == "0") {
        this.orderByPrice = true;
      } else {
        this.orderByPrice = false;
      }
      // 再次执行查询
      this.query();
    },
    // 重置方法
    reset() {
      this.selectedRoleList = [];
      this.selectedWeaponList = [];
      this.accountList = [];
      this.roleText = ''
      this.searchByNumber = '0'
      this.beginAccountPrice = 0
      this.endAccountPrice = 0
      this.allRoleList.forEach((item) => {
        item.list.forEach((subItem) => {
          subItem.isActive = false;
        });
      });
    },
    // 查无结果
    query() {
      // 按照编号搜索
      if(this.searchByNumber==1){
          this.queryParams.accountNumber = this.roleText
          getCountList(this.queryParams).then((res) => {
            // 查无结果
            if(res.data.rows.length==0){
              this.$message({
                type:"info",
                message:"查无结果"
              })
            }
            this.total = res.data.total;
            this.accountList = res.data.rows;
            // 取消加载状态
            this.isLoading = false;
          });
          return false
      }

      // 设置值
      let accountRoles = this.selectedRoleList.map(res=>res.name+(res.count==0?'':res.count)).join(".")
      if(this.roleText){
        if(accountRoles){
          accountRoles=this.roleText+"."+accountRoles
        }else{
          accountRoles = this.roleText
        }
      }
      let accountWeapons = this.selectedWeaponList.map(res=>res.name+(res.count==0?'':res.count)).join(".")


      // 判断是否需要加进查询列表
      if(accountRoles) this.queryParams.accountRoles = accountRoles
      if(accountWeapons) this.queryParams.accountWeapons = accountWeapons
      if(this.beginAccountPrice) this.queryParams.beginAccountPrice = this.beginAccountPrice
      if(this.endAccountPrice) this.queryParams.endAccountPrice = this.endAccountPrice

      // 设置查询结果排序方式
      this.queryParams.orderByPrice = this.orderByPrice;
      getCountList(this.queryParams).then((res) => {
        // 查无结果
        if(res.data.rows.length==0){
          this.$message({
            type:"info",
            message:"查无结果"
          })
        }
        this.total = res.data.total;
        this.accountList = res.data.rows;
        // 取消加载状态
        this.isLoading = false;
      });
    },
  },
  mounted() {
    // 进行初始化
    getRoleList({ roleStar: 5 }).then((res) => {
      res.data.rows.forEach((res) => {
        this.allRoleList[0].list.push({
          name: res.roleName,
          imgUrl: process.env.VUE_APP_SERVER_PATH + res.rolePicture,
          isActive: false,
        });
      });
    });
    getWeaponList({ WeaponStar: 5 }).then((res) => {
      res.data.rows.forEach((res) => {
        this.allRoleList[1].list.push({
          name: res.weaponName,
          imgUrl: process.env.VUE_APP_SERVER_PATH + res.weaponPicture,
          isActive: false,
        });
      });
    });
    getRoleList({ roleStar: 4 }).then((res) => {
      res.data.rows.forEach((res) => {
        this.allRoleList[2].list.push({
          name: res.roleName,
          imgUrl: process.env.VUE_APP_SERVER_PATH + res.rolePicture,
          isActive: false,
        });
      });
    });
    getWeaponList({ WeaponStar: 4 }).then((res) => {
      res.data.rows.forEach((res) => {
        this.allRoleList[3].list.push({
          name: res.weaponName,
          imgUrl: process.env.VUE_APP_SERVER_PATH + res.weaponPicture,
          isActive: false,
        });
      });
    });
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
// 信息盒子
.infoBox {
  padding: 16px 20px;
  .content {
    display: flex;
    justify-self: flex-start;
    height: 40px;
    font-weight: bold;
    font-size: 0.88rem;
    .title {
      color: #ffffff;
    }

    .value {
      color: #51c0ff;
      margin-left: 10px;

      select {
        background-color: #17222f;
        color: #51c0ff;
        width: 120px;
        padding: 4px;
        border: none;
        outline: none;
      }
    }
  }
}

// 选择角色盒子
.choiceRoleBox {
  // 盒子头
  .boxHead {
    color: #ffffff;
    background-color: #17222f;
    text-align: center;
    height: 28px;
    line-height: 26px;
    font-size: 0.88rem;
    font-weight: bold;
  }
  // 规则内容
  .content {
    color: #fff;
    padding: 6px 14px;
    font-size: 0.86rem;
    line-height: 24px;

    li {
      list-style: none;
    }
  }

  // 已选角色武器标题
  .roleWeaponTitle {
    color: #ffffff;
    height: 28px;
    line-height: 26px;
    font-size: 0.88rem;
    font-weight: bold;
    margin-left: 24px;
  }

  .roleWeaponTitle::before {
    content: "|";
    font-weight: bolder;
    height: 20px;
    margin-right: 2px;
  }
}

// 条件搜索盒子
.mutiSearchBox {
  padding: 16px 10px 0;
  .content {
    display: flex;
    justify-self: flex-start;
    height: 40px;
    font-weight: bold;
    font-size: 0.88rem;
    .title {
      color: #ffffff;
    }

    .value {
      margin-left: 10px;

      span.line {
        color: rgb(213, 25, 25);
        font-weight: bolder;
        margin: 0 6px;
      }

      input {
        background-color: #ffffff;
        padding: 4px 8px;
        border: none;
        outline: none;
        border-radius: 2px;
      }

      input::-webkit-input-placeholder {
        color: rgba(0, 0, 0, 0.4);
      }
      input:-moz-placeholder {
        color: rgba(0, 0, 0, 0.4);
      }
      input:-ms-input-placeholder {
        color: rgba(0, 0, 0, 0.4);
      }

      input[name="searchInput"] {
        width: 180px;
      }

      input[type="number"] {
        width: 60px;
      }

      input[type="checkbox"] {
        width: 24px;
        height: 24px;
        // background-color: #fff;
      }
    }
  }
}

// 操作事件盒子样式
.operateBox {
  padding: 16px 10px;

  .content {
    display: flex;
    justify-content: space-around;

    .btn {
      button {
        background-color: #17222f;
        border: none;
        color: #ffffff;
      }

      button:active {
        background-color: #17222f;
        border: none;
        color: #ffffff;
      }
    }
  }
}

// 查询结果盒子
.resultListBox {
  // 标题切换
  .switchTitle {
    height: 40px;
    width: 100%;
    background-color: #112032;
    color: #fff;
    display: flex;

    .switch {
      width: 50%;
      height: 100%;
      font-size: 14px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .switch.active {
      background-color: #323e4c;
    }
  }
}

// 列表内容
.resultList {
  background-image: linear-gradient(to right, #22394b, #17222f) !important;
  margin: 6px auto !important ;
  .labelBox {
    padding: 8px 8px 0;
    font-size: 12px;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    color: white;
    .label {
      margin: 4px;
      padding: 2px 4px;
      border-radius: 4px;
    }

    .label.blue {
      color: #2c3e50;
      background-color: #b0dcf4;
    }
    .label.red {
      color: #ff89bb;
      background-color: #6a51b6;
    }
    .label.green {
      background-color: #087403;
    }
    .label.yellow {
      background-color: #b39f3d;
    }
    .label.girl {
      background-color: #e44731;
    }
    .label.boy {
      background-color: #057dbe;
    }
  }
  // 备注
  .remark {
    font-size: 14px;
    padding: 10px;
    color: #f8695a;
  }
}
// 分页
.paginationBox {
  font-size: 10px;
  background-color: #112032;
  height: 50px;
  margin: 6px auto !important ;
}
</style>

<style lang="less">
// 角色展示列表
.roleListBox {
  .content {
    .el-tabs__item.is-top {
      color: #ffffff;
      font-weight: bold;
    }
    .el-tabs__item.is-top.is-active {
      color: #2df626 !important;
    }

    .el-tabs__nav-prev,
    .el-tabs__nav-next {
      color: #fff;
      font-size: 18px;
    }
  }
}

.paginationBox {
  .el-pagination.el-pagination--small {
    .el-input.el-pagination__editor.is-in-pagination,
    button {
      background-color: #323e4c;
    }

    .el-icon.el-icon-arrow-right,
    .el-icon.el-icon-arrow-left,
    .el-pagination__jump,
    .el-pagination__total {
      color: #ffffff;
    }

    .el-pager li {
      color: #ffffff;
      background-color: #323e4c;
    }
  }
}
</style>
